<template>
	<view class="warp">
		 <view class="tabchange">
			 <view @click="changetab(2)" :class="tabnum==2?'activity':'activityed'">
			 	我的
			 </view>
		 	<view @click="changetab(0)" :class="tabnum==0?'activity':'activityed'">
		 		进行中
		 	</view>
			
			<view @click="changetab(1)" :class="tabnum==1?'activity':'activityed'">
				已结束
			</view>
		 </view>
		 <view class="activity_list">
		 	<view class="list">
				<view class="" v-for="(item,index) in list" :key="index">
					<view @click="toactivityinfo(item)" class="list_item" >
						<view class="i_left">
							{{item.activityTitle}}
						</view>
						<view class="i_right">
							<span v-if="item.activityState==1" style="margin-right: 20rpx;color: #ff841f;">未开始</span>
							<span v-if="item.activityState==2" style="margin-right: 20rpx;color: #a6e22e;">进行中</span>
							<span v-if="item.activityState==3" style="margin-right: 20rpx; color: #cecece;">已结束</span>
							<uni-icons type="forward" color="#282828" size="20"></uni-icons>
						</view>
					</view>
					<view class="" style="background-color: #fff;padding:5rpx 20rpx;display: flex;justify-content: end;border-top: 2rpx solid #ececec;">
						<span style="margin-right: 20rpx;color: #cecece;">{{item.createTime}}</span>
					</view>
					<view class="votep" v-if="item.createId==userCenterData.memberId">
						<view @click="tovoteinfo(item)" class="votebutton" v-if="item.activityExtra1!=null">
							投票配置
						</view>
						<view @click="toactivitynum(item)" class="votebutton">
							活动数据
						</view>
					</view>
				</view>
		 		<view style="text-align: center;" class="" v-if="list.length==0">
		 			<image  src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/clear.png" mode="widthFix"></image>
		 		     <view class="" style="color: #a3a3a3;">
		 		     	暂无数据
		 		     </view>
		 		</view>
		 	</view>
		 </view>
		 <view @click="toaddinfo" class="bottom_button" v-if="isshop">
		 	发布活动
		 </view>
	</view>
</template>

<script>
import { loginGoPage } from '../../utils/common';
	import {
			mapState,
			mapMutations
		} from 'vuex'
	export default {
		data() {
			return {
				tabnum:2,
				list:[],
				queryform:{
					pageSize:20,
					current:1,
					activityState:'',
					memberId:''
				},
				total:0,
				isshop:false
			};
		},
		onLoad() {
			this.getidshop()
			this.queryform.memberId=this.userCenterData.memberId
			this.tabnum=2
		  this.getList()	
		},
		// 下拉
			onPullDownRefresh() {
				// 刷新位置
				this.queryform.memberId=this.userCenterData.memberId
				this.tabnum=2
			this.getList()
				var that=this
				setTimeout(function(){
						uni.stopPullDownRefresh()
					},1000)
			},
			onReachBottom(){
				if(this.queryform.pageSize*this.queryform.current>this.total){
					uni.showToast({
						title:"数据加载完毕",
						icon:'none'
					})
				}else{
					this.queryform.current++
					this.$request({
						url:'v3/activity/front/activity/list',
						method:'GET',
						data:this.queryform
					}).then(res=>{
						this.list.push(...res.data.list)
						
					})
				}
			},
			computed: {
						...mapState(['hasLogin', 'userInfo', 'userCenterData']),
						},
		methods:{
			// 校验是否是商户
			getidshop(){
				this.$request({
					url:'v3/seller/front/vendor/list',
					method:"GET",
					data:{vendorMobile:this.userCenterData.memberMobile}
				}).then(res=>{
					if(res.data.length!=0){
						this.isshop=true
					}
				})
				
			},
			// 获取活动列表
			getList(){
				this.$request({
					url:'v3/activity/front/activity/list',
					method:'GET',
					data:this.queryform
				}).then(res=>{
					this.list=res.data.list
					this.total=res.data.pagination.total
				})
			},
			// 活动配置
			tovoteinfo(val){
				uni.navigateTo({
					url:"/standard/voteadd/voteadd?id="+val.activityId
				})
			},
			
			changetab(val){
				this.tabnum=val
				if(val==0){
					// 查询所有进行中的
					this.queryform.activityState='2'
					this.queryform.memberId=''
					this.getList()
				}else if(val==1){
					// 查询已结束的
					this.queryform.activityState='3'
					this.queryform.memberId=''
					this.getList()
				}else{
					this.queryform.activityState=''
					this.queryform.memberId=this.userCenterData.memberId
					this.getList()
				}
			},
			toactivitynum(val){
				uni.navigateTo({
					url:"/extra/activitynum/activitynum?id="+val.activityId
				})
			},
			toaddinfo(){
				uni.navigateTo({
					url:'/extra/activeAdd/activeAdd'
				})
			},
			toactivityinfo(val){
				let pathinfo='/extra/activityinfo/activityinfo'
				this.$Router.push({
					path:pathinfo,
					query:{
						id:val.activityId,
						memberId:this.userCenterData.memberId
					}
				})
				console.log(val);
				// uni.navigateTo({
				// 	url:'/extra/activityinfo/activityinfo?id='+val.activityId
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
		width: 750rpx;
		margin: 0 auto;
		background: #F5F5F5;
	}
.warp{
	background-color: #f7f7f7;
	color: #282828;
	font-family: PingFang-SC-Regular;
	overflow: hidden;
	.tabchange{
		margin-top: 10rpx;
		background-color: #fff;
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 30%;
		justify-content: space-between;
		.activity{
			color: red;
			font-size: 30rpx;
		}
		.activityed{
			color: #282828;
			font-size: 26rpx;
		}
	}
	.activity_list{
		margin-top: 10rpx;
		
		.list{
			.list_item{
				background-color: #fff;
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 12rpx;
				
			}
			.votep{
				padding: 10rpx 30rpx;
				display: flex;
				.votebutton{
					margin-left: 10rpx;
					width: 200rpx;
					height: 60rpx;
					border-radius: 20rpx;
					border: 2rpx solid #ff841f;
					text-align: center;
					line-height: 60rpx;
					color: #ff841f;
					background-color: #fff;
				}
			}
		}
	}
	.bottom_button{
		position: fixed;
		bottom: 20rpx;
		left: 30%;
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		color: #fff;
		background-color: red;
		text-align: center;
		
	}
	}
</style>
